import React, { useState, forwardRef, useImperativeHandle, useRef } from 'react'
import { Modal } from 'antd'

function BaseModal(props, ref) {
  const [isShow, setIsShow] = useState(false);
  const showModal = () => {
    console.log("child showModal");
    setIsShow(true);
  } 

  const okTrigger = () => {
    setIsShow(false);
  }

  const cancelTrigger = () => {
    setIsShow(false);
  }

  // 暴露子组件中定义的方法
  useImperativeHandle(ref, () => ({
    showModal
  }))

  return (
    <Modal 
      title="提示"
      ref={ref}
      open={isShow}
      onOk={okTrigger}
      onCancel={cancelTrigger}>
        <p>1111</p>
        <p>1111</p>
        <p>1111</p>
        <p>1111</p>
        <p>1111</p>
    </Modal>
  )
}

export default forwardRef(BaseModal);